<template>
  <cu-layout title="我的套餐">
    <view class="">
      <view class="cu-title">当前套餐</view>
      <view class="px-12">
        <view v-for="item in state.list" :key="item.id" class="cu-card flex">
          <view class="flex-1">
            <view class="text-18 font-600">{{ item.flow_name }}</view>
            <view class=" ">
              <view class="text-content text-13 my-10">
                ({{ item.flow_type === 2 ? '与当月基础套餐失效时间同步清零' : `${item.flow_day}天有效期，套餐用完或到期停机` }})
              </view>
              <view class="text-tips text-13">订单号:{{ item.order_sn }}</view>
            </view>
          </view>
          <view class="ml-10">
            <view class="text-11 text-warn">
              <view class="mb-5">生效日期:{{ item.flow_start_date }}</view>
              <view class="">有效日期:{{ item.flow_end_date }}</view>
            </view>
            <view class="flex-c mt-15">
              <uv-tags v-if="item.pay_status === 1" type="success" size="mini" plain plain-fill text="已到账" />
              <uv-tags v-else type="info" size="mini" plain plain-fill text="已失效" />
            </view>
          </view>
        </view>
        <uv-empty v-if="!state.list.length" mode="list" text="当前套餐为空" />
      </view>
    </view>
    <view class="">
      <view class="cu-title">历史套餐</view>
      <view class="px-12">
        <view v-for="item in state.history" :key="item.id" class="cu-card flex">
          <view class="flex-1">
            <view class="text-18 font-600">{{ item.flow_name }}</view>
            <view class=" ">
              <view class="text-content text-13 my-10">{{ item.flow_size }}G通用流量，有效期{{ item.flow_day }}天,套餐</view>
              <view class="text-tips text-13">订单号:{{ item.order_sn }}</view>
            </view>
          </view>
          <view class="ml-10">
            <view class="text-11 text-warn">
              <view class="mb-5">生效日期:{{ item.flow_start_date }}</view>
              <view class="">有效日期:{{ item.flow_end_date }}</view>
            </view>
            <view class="flex-c mt-15">
              <uv-tags type="info" size="mini" plain plain-fill text="已失效" />
            </view>
          </view>
        </view>
        <uv-empty v-if="!state.history.length" mode="list" text="历史套餐为空" />
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'

const state = reactive({
  agentId: 0,
  list: [],
  history: []
})

onLoad(async(options) => {
  if (options.agentId) {
    state.agentId = Number(options.agentId)
  } else {
    const res = await $.get('/user/agentInfo')
    if (res.data?.id) {
      state.agentId = res.data.id
    } else {
      return $.utils.toast(res.msg || '暂无数据')
    }
  }
  reload()
})

function reload() {
  $.get('/user/flow', { type: 0, agent_id: state.agentId }).then(res => {
    state.list = res.data
  })
  $.get('/user/flow', { type: 1, agent_id: state.agentId }).then(res => {
	  state.history = res.data
  })
}
</script>

<style lang="scss">

</style>
